<template>
  <view
    class="xinguan-view"
    v-for="(item, index) in hpv_view_data"
    :key="index"
  >
    <text class="name">{{ item.hpv_name }}</text>
    <view class="xinguan-order">
      <text>接种人:</text>
      <text>{{ item.name }}</text>
    </view>
    <view class="xinguan-order">
      <text>接种地点:</text>
      <text>{{ item.address }}</text>
    </view>
    <view class="xinguan-order">
      <text>疫苗套餐:</text>
      <text>{{ item.combo }} {{ item.ino_time }}</text>
    </view>
    <view class="xinguan-order">
      <text>订单编号:</text>
      <text>{{ item.order_number }}</text>
    </view>
    <view class="reg-price"
      ><text>¥{{ item.price }}</text></view
    >
    <!-- 取消预约 -->
    <view class="reg-cancel">
      <text
        :class="item.cancel ? '' : 'prevent_style'"
        @click="Cancel(item._id, index)"
        >{{ item.cancel ? "取消预约" : "已取消预约" }}</text
      >
    </view>
  </view>
  <!-- 提示组件 -->
  <point :show="show" />
</template>

<script setup>
import { onMounted, ref } from "vue";
import apiRequest from "~/api/index";
import { onShow } from "@dcloudio/uni-app";
import point from "~/components/point/point";
let hpv_view_data = ref();
onShow(async () => {
  const res = await apiRequest.HpvuserOrder();
  hpv_view_data.value = res.data;
});

const Cancel = async (id, index) => {
  const res = await apiRequest.HpvCancel({ _id: id });
  if (res.msg == "SUCCESS") {
    hpv_view_data.value[index].cancel = false;
  }
};
</script>

<style lang="scss" scoped>
@import url("../../../common-style/vaccine.css");
</style>
